import React from 'react'
import { View, StyleSheet, Text } from 'react-native'
import CustomFlatList from '../../components/custom-flat-list/index'
import CustomButton from '../../components/button/CustomButton'
import RefreshState from '../../components/custom-flat-list/RefreshState'
import PropTypes from 'prop-types'
import Animated from 'react-native-reanimated'

export default class ScrollTabView extends React.Component {
  static defaultProps = {
    hideItem: false,
    dataArr: [],
    scrollEnabled: true
  }

  static propTypes = {
    renderHeader: PropTypes.func,
    renderTabView: PropTypes.func,
    renderInnerFirstView: PropTypes.func,
    renderItem: PropTypes.func,
    hideItem: PropTypes.bool,
    scrollEnabled: PropTypes.bool,
    dataArr: PropTypes.array,
    onHeaderRefresh: PropTypes.func,
    onFooterRefresh: PropTypes.func,
    onScroll: PropTypes.func,
    keyExtractor: PropTypes.func,
    ListEmptyComponent: PropTypes.func,
    style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
    contentContainerStyle: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
  }

  constructor (props) {
    super(props)
    this.state = {
      dataArr: [0, 1].concat(props.dataArr)
    }
    this.datas = [
      [2, 3, 4], [2, 3, 4, 5], [2]
    ]
    this.currentDataArr = []
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    if (nextProps.dataArr !== this.currentDataArr) {
      this.setState({
        dataArr: [0, 1].concat(nextProps.dataArr)
      }, () => {
        this.currentDataArr = nextProps.dataArr
      })
    }
  }

  componentDidMount () {
    console.info('testScroll componentDidMount')
  }

  render () {
    const { dataArr } = this.state
    const { renderHeader, onHeaderRefresh, onFooterRefresh, onScroll, style, scrollEnabled, ListEmptyComponent, contentContainerStyle } = this.props
    return (
      <CustomFlatList
        style={style}
        contentContainerStyle={contentContainerStyle}
        ref={this._customFlatListRef}
        defaultLength={2}
        data={dataArr}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem}
        stickyHeaderIndices={[1]}
        onHeaderRefresh={onHeaderRefresh}
        onFooterRefresh={onFooterRefresh}
        ListHeaderComponent={renderHeader()}
        onScroll={onScroll}
        scrollEnabled={scrollEnabled}
        nestedScrollEnabled={true}
      />
    )
  }

  _keyExtractor = (item, index) => {
    const { keyExtractor } = this.props
    if (index < 2) {
      return index.toString()
    } else {
      if (keyExtractor) {
        return keyExtractor(item, index)
      } else {
        return index.toString()
      }
    }
  }

  _customFlatListRef = (ref) => {
    this._cFlatListRef = ref
  }

  _renderItem = ({ item, index }) => {
    if (index === 0) {
      return this._renderFirstView()
    } else if (index === 1) {
      return this._renderSecondView()
    } else {
      return this._renderItemView({ item, index })
    }
  }

  _renderItemView = (item, index) => {
    const { hideItem, renderItem } = this.props
    return (
      <View style={styles.itemView}>
        {renderItem(item, index)}
        {hideItem && (<View style={styles.itemOverView}/>)}
      </View>
    )
  }

  _renderFirstView = () => {
    const { renderTabView } = this.props
    if (renderTabView) {
      return renderTabView()
    } else {
      return null
    }
  }

  _renderSecondView = () => {
    const { renderInnerFirstView, ListEmptyComponent, dataArr } = this.props
    if (dataArr.length > 0) {
      return renderInnerFirstView ? renderInnerFirstView() : null
    } else {
      return ListEmptyComponent ? ListEmptyComponent() : null
    }
  }
}
const styles = StyleSheet.create({
  headerView: {
    backgroundColor: 'blue',
    height: 300
  },
  firstView: {
    backgroundColor: 'red',
    height: 100,
    flexDirection: 'row'
  },
  changeBtnView: {
    flex: 1
  },
  secondView: {
    backgroundColor: 'purple',
    height: 100
  },
  itemView: {},
  itemOverView: {
    position: 'absolute',
    top: 0,
    right: 0,
    left: 0,
    bottom: 0,
    backgroundColor: 'white'
  }
})
